<template>
  <div class="customer_account_container">
    <div class="search_container">
      <div class="grey_title_container">
        <span style="margin-right: 6px;" class="text"><i class="el-icon-search"></i></span>
        <span class="text">筛选查询</span>
      </div>
      <div class="search_content_container form_container">
        <el-row :gutter="30">
          <el-col :span="3" class="item">
            <div class="text_container">
              <span class="text">姓名:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="4" class="item">
            <div class="text_container">
              <span class="text">电话:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="5" class="item">
            <div class="text_container">
              <span class="text">卡号:</span>
            </div>
            <el-input size="mini"></el-input>
          </el-col>
          <el-col :span="3" style="text-align: right;">
            <el-button type="primary" size="mini" style="padding-left: 26px; padding-right: 26px;">搜索</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="account_container">
      <div class="grey_title_container account_header">
        <div class="left">
          <span class="indicator"></span>
          <span class="text">客户账户</span>
        </div>
        <div class="right">
          <el-button type="primary" plain size="small">交预约金</el-button>
          <el-button type="primary" plain size="small">交储值</el-button>
          <el-button type="primary" plain size="small">交住院押金</el-button>
          <el-button type="primary" plain size="small">退储值</el-button>
          <el-button type="primary" plain size="small">退预约金</el-button>
          <el-button type="primary" plain size="small">退住院押金</el-button>
        </div>
      </div>
      <el-table
        :data="accounts"
        border>
        <el-table-column
          type="selection"
          fixed
          width="35">
        </el-table-column>
        <el-table-column
          label="序号"
          align="center"
          prop="key1"/>
        <el-table-column
          label="姓名"
          align="center"
          prop="key2"/>
        <el-table-column
          label="电话"
          align="center"
          prop="key3"/>
        <el-table-column
          label="咨询师"
          align="center"
          prop="key4"/>
        <el-table-column
          label="一卡通号"
          align="center"
          prop="key5"/>
        <el-table-column
          label="客户级别"
          align="center"
          prop="key6"/>
        <el-table-column
          label="储值余额"
          align="center"
          prop="key7"/>
        <el-table-column
          label="预约金"
          align="center"
          prop="key8"/>
        <el-table-column
          label="住院押金"
          align="center"
          prop="key9"/>
        <el-table-column
          label="欠款总额"
          align="center"
          prop="key10"/>
        <el-table-column
          label="当前积分"
          align="center"
          prop="key11"/>
      </el-table>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue';
  import Component from 'vue-class-component';

  @Component
  export default class CustomerAccountManage extends Vue {
    accounts = [{
      key1: 1,
      key2: '吴晓晓',
      key3: '158****1284',
      key4: '吴晶晶',
      key5: '74523081C',
      key6: '钻石会员',
      key7: '20000.00',
      key8: '10000.00',
      key9: '20000.00',
      key10: '20000.00',
      key11: '2000'
    }];
  }
</script>

<style scoped>
  .search_container {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }

  .search_content_container {
    padding: 15px 10px;
  }

  .account_header {
    border-top: 1px solid #f0f0f0;
    border-left: 1px solid #f0f0f0;
    border-right: 1px solid #f0f0f0;
  }
</style>
